import QtQuick 2.0

Item {
    id:root
    width: 800;height: 420

    //动画1
    //Animation on 属性变化的策略，动画会在加载完成后立即播放。
    ClickableImageV3 {
        id: rocket1
        x:40;y:root.height-height
        source: "hep.png"
        text: "animation on property"

        //数值改变，y值在4S时间（4000ms）内到达40
        NumberAnimation on y {
            to:40;duration: 4000

        }
    }

    //动画2
    //behavior on 属性行为策略个行为告诉属性值每时每刻都在变化，通过动画的方式来改变这个值。可以使用行为元素
    //enabled : false来设置行为失效。
    ClickableImageV3 {
        id: rocket2
        x:300;y:1
        source: "hep.png"
        text: "animation on property"

        Behavior on y {
            NumberAnimation {duration:  4000}
        }

        onClicked: y = 40
//        onClicked: y = 40+Math.random()*(205-40) //随机
    }


    //动画3
    //standalone animation独立动画策略
    /*这个动画由一个私有的元素定义并且可以写在文档的任何地方。点击火箭调用动画函数start()来启动动画。
    每一个动画都有start()，stop()，resume()，restart()函数。这个动画自身可以比其他类型的动画更早
    的获取到更多的相关信息。我们只需要定义目标和目标元素的属性需要怎样改变的一个动画。
    我们定义一个to属性的值，在这个例子中我们也定义了一个from属性的值允许动画可以重复运行。*/

    ClickableImageV3 {
        id: rocket3
        x:600;y:root.height-height
        source: "hep.png"
        text: "animation on property"


        onClicked: anim.start()
        NumberAnimation {
            id:anim
            target: rocket3
            properties: "y"
            to:40
            duration: 4000
        }

    }
}
